// login
import React, { Component } from 'react';
import { InputItem, Button } from 'antd-mobile';
import { inject, observer } from 'mobx-react';
import { RouterStore } from 'mobx-react-router';
import AuthStore from '../../stores/AuthStore';
import ComponentStore from '../../stores/ComponentStore';
const logo = require('../../assets/img/logo.png');

import './Login.scss';

export interface LoginProps {
  authStore: AuthStore;
  componentStore: ComponentStore;
  routingStore: RouterStore;
}

@inject('routingStore', 'componentStore', 'authStore')
@observer
export default class Login extends Component<LoginProps> {
  handlePhoneNumInput = (v: string) => {
    const authStore = this.props.authStore;
    const num = v;

    authStore.setPhoneNum(num);
  }
  handlePasswordInput = (v: string) => {
    const authStore = this.props.authStore;
    const psw = v;
    authStore.setPassword(psw);
  }

  render(): JSX.Element {

    const { authStore, routingStore, componentStore } = this.props;
    return (
      <div 
        className="login-container" 
        style={{ backgroundImage: `url(${ require('../../assets/img/loading_screen.png')})`}}
      >
        <img src={logo} className="logo-pic" />
        <div className="login-input-box">
          <span>登录</span>
          <InputItem
            className="transparent-input"
            type="phone"
            onChange={this.handlePhoneNumInput}
            clear={true}
            placeholder="手机号"
          />
          <InputItem
            className="transparent-input"
            type="password"
            onChange={this.handlePasswordInput}
            clear={true}
            placeholder="密码"
          />
          <Button
            className="login-confirm-btn"
            onClick={() => { authStore.toLogin(routingStore, componentStore); }}
          >
            登录
          </Button>
          <div className="reset-btn-wrapper">
            <span
              className="to-reset-btn"
              onClick={
                () => {
                  routingStore.push('/reset');
                  componentStore.setResetTitle('找回密码');
              }
            }
            >找回密码
            </span>
        </div>
      </div>
      </div >
    );
  }
}